<template>
    <div>
        <Modal title="用户注册" @on-visible-change="changeStatusHandle" width="400" v-model="isShowRegisterModal" @on-cancel="closeModal" @on-ok="confirmModal"  :mask-closable="false" :closable="false">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80">
                <FormItem label="用户名：" prop="username">
                    <Input type="text" v-model="formInline.username" placeholder="请输入用户名..."/>
                </FormItem>
                <FormItem label="密码：" prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="请输入密码..."/>
                </FormItem>
                <FormItem label="确认密码：" prop="rePassword">
                    <Input type="password" v-model="formInline.rePassword" placeholder="请输入确认密码..."/>
                </FormItem>
            </Form>
            <div slot="footer" style="text-align: center">
                <Button @click="closeModal">取消</Button>
                <Button type="primary" @click="confirmModal('formInline')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="tsx">
import { Component,Prop} from "vue-property-decorator"
import { SYSUSER_REGISTER,INFO,SAVE } from '@/store/modules/crud/keys'
import MiXinModal  from '@/mixin/views/modal'
import { Base64 } from 'js-base64';

@Component
export default class TheRegisterModal extends MiXinModal {
    @Prop(Boolean)isShowRegisterModal!: boolean

    formInline = {
        username: '',
        password: '',
        rePassword: ''
    }
    ruleInline= {
        username:[{ required: true, message: '用户名不能为空.', trigger: 'blur' }],
        password:[
            { required: true, message: '请输入密码.', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码应大于6位', trigger: 'blur' }
        ],
        rePassword: [
            { required: true, message: '请再次输入密码.', trigger: 'blur' },
            { type: 'string', min: 6, message: '密码应大于6位', trigger: 'blur' }
        ]
    }
    get _name(){
        return SYSUSER_REGISTER
    }
    closeModal(){
        this.$emit("close-register-modal");
    }
    confirmModal(formInline: any){
        const username = this.formInline.username;
        const password = this.formInline.password;
        const rePassword = this.formInline.rePassword;
        if(rePassword != password){
            this.$Message.error("两次输入密码不一致!");
            return ;
        }
        (this.$refs[formInline] as any).validate(async (valid: any) => {
            if (valid) {
                const key = this.generatekey();
                const base64Username = Base64.encode(username);
                const base64Password = Base64.encode(password);
                const desUsername = this.encryptDes(base64Username,key);
                const desPassword = this.encryptDes(base64Password,key);
                const checkBit = this.generateCheckBit(username+password+key);
                this.$store.commit(INFO,{name: this._name,info: {
                    username: Base64.encode(desUsername+key),
                    password: Base64.encode(desPassword),
                    checkBit: checkBit
                }});

                const promise = await this.$store.dispatch(SAVE,{name: this._name});
                if(promise.data==1){
                    this.$Message.success("注册成功.");
                    this.closeModal();
                    return;
                }
                if(promise == undefined){
                    this.$Message.error("注册失败!");
                }
            }
        })
    }
    changeStatusHandle(){
        if(this.isShowRegisterModal){
            this.formInline.username = ''
            this.formInline.password = ''
        }
    }
    generateCheckBit(str: string){
        let sum = 0;
        for(let i=0; i<str.length;i++ ){
            const k = str.charCodeAt(i);
            sum = sum + k;
        }
        return sum;
    }
}
</script>

<style scoped>

</style>
